<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>宅基地使用证</title>
    <link type="text/css" rel="stylesheet" href="lib/4.10/esri/css/main.css">
    <link rel="stylesheet" type="text/css" href="css/certificate.css">
    <script src="lib/jquery-1.8.0.min.js"></script>
</head>
<body>
<table border="1" cellspacing="0" class="float" style="height: 80vh;width: 40vw;margin-left: 9vw">
    <tr>
        <td colspan="2">土地使用者</td>
        <td><input type="text" id="people"></td>
        <td>出生日期</td>
        <td><input type="date"></td>
    </tr>
    <tr>
        <td colspan="2">图斑号</td>
        <td><input type="text" id="tNumber"></td>
        <td>地类号</td>
        <td><input type="text" id="dNumber"></td>
    </tr>
    <tr>
        <td colspan="2">批准建房文号</td>
        <td colspan="3"><input type="text"></td>
    </tr>
    <tr>
        <td colspan="2">宅基地总面积</td>
        <td colspan="3"><input type="text" id="area"></td>
    </tr>
    <tr>
        <td colspan="2">批准使用权面积</td>
        <td colspan="3"><input type="text" id="area2"></td>
    </tr>
    <tr>
        <td rowspan="4">其中</td>
        <td>主房占地</td>
        <td colspan="3"><input type="text"></td>
    </tr>
    <tr>
        <td>副房占地</td>
        <td colspan="3"><input type="text"></td>
    </tr>
    <tr>
        <td>场地</td>
        <td colspan="3"><input type="text"></td>
    </tr>
    <tr>
        <td>共用分摊面积</td>
        <td colspan="3"><input type="text"></td>
    </tr>
    <tr>
        <td colspan="2">所属村组</td>
        <td colspan="3"><input type="text" id="admin"></td>
    </tr>
    <tr>
        <td rowspan="4">四周</td>
        <td>东至</td>
        <td colspan="3"><input type="text"></td>
    </tr>
    <tr>
        <td>西至</td>
        <td colspan="3"><input type="text"></td>
    </tr>
    <tr>
        <td>南至</td>
        <td colspan="3"><input type="text"></td>
    </tr>
    <tr>
        <td>北至</td>
        <td colspan="3"><input type="text"></td>
    </tr>
    <tr>
        <td rowspan="4" colspan="5" height="50px">备注：<input type="text"></td>
    </tr>
</table>

<table class="float" border="1" cellspacing="0" style="margin-left: 30px;height: 80vh;width: 40vw">
    <tr>
        <td width="100px" colspan="2">
            <div id="map" style="width: 100%;height: 100%"></div>
        </td>
    </tr>
    <tr>
        <td width="20px" height="40vh">发证机关</td>
        <td>
            <div style="width: 100%;height: 100px;">
                <div style="position: absolute;z-index: 1;right: 10px">
                    <canvas id="canvas" width="100" height="100"></canvas>
                </div>
                <div style="position: absolute;z-index: 1;bottom: 0;right: 0" id="time">年月日</div>
            </div>
        </td>
    </tr>
</table>

<button onclick="paperPrint()">打印</button>
<script>
    dojoConfig = {
        has: {
            "dojo-firebug": true,
            "dojo-debug-messages": true
        },
        baseUrl: "lib/4.10/dojo/",
        parseOnLoad: false,
        //用于页面加载时立即加载的JS依赖
        packages: [{
            name: "myModule",
            location: location.pathname.replace(/\/[^/]*$/, '') + "/module",
            main: "SmallMap"
        }]
    }
</script>
<script src="lib/4.10/init.js"></script>
<script>
    function paperPrint() {
        $("button").hide();
        $(".esri-zoom").hide();
        window.print()
    }

    function createSeal(id, company, name) {

        var canvas = document.getElementById(id);
        var context = canvas.getContext('2d');

        // 绘制印章边框
        var width = canvas.width / 2;
        var height = canvas.height / 2;
        context.lineWidth = 2;
        context.strokeStyle = "#f00";
        context.beginPath();
        context.arc(width, height, 45, 0, Math.PI * 2);
        context.stroke();

        //画五角星
        create5star(context, width, height, 5, "#f00", 0);

        // 绘制印章名称
        context.font = '10px Helvetica';
        context.textBaseline = 'middle';//设置文本的垂直对齐方式
        context.textAlign = 'center'; //设置文本的水平对对齐方式
        context.lineWidth = 1;
        context.fillStyle = '#f00';
        context.fillText(name, width, height + 20);

        // 绘制印章单位
        context.translate(width, height);// 平移到此位置,
        context.font = '12px Helvetica';
        var count = company.length;// 字数
        var angle = 4 * Math.PI / (3 * (count - 1));// 字间角度
        var chars = company.split("");
        var c;
        for (var i = 0; i < count; i++) {
            c = chars[i];// 需要绘制的字符
            if (i == 0)
                context.rotate(5 * Math.PI / 6);
            else
                context.rotate(angle);
            context.save();
            context.translate(40, 0);// 平移到此位置,此时字和x轴垂直
            context.rotate(Math.PI / 2);// 旋转90度,让字平行于x轴
            context.fillText(c, 0, 5);// 此点为字的中心点
            context.restore();
        }

        //绘制五角星
        /**
         * 创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离为radius,rotate=0时一个顶点在对称轴上
         * rotate:绕对称轴旋转rotate弧度
         */
        function create5star(context, sx, sy, radius, color, rotato) {
            context.save();
            context.fillStyle = color;
            context.translate(sx, sy);//移动坐标原点
            context.rotate(Math.PI + rotato);//旋转
            context.beginPath();//创建路径
            var x = Math.sin(0);
            var y = Math.cos(0);
            var dig = Math.PI / 5 * 4;
            for (var i = 0; i < 5; i++) {//画五角星的五条边
                var x = Math.sin(i * dig);
                var y = Math.cos(i * dig);
                context.lineTo(x * radius, y * radius);
            }
            context.closePath();
            context.stroke();
            context.fill();
            context.restore();
        }
    }

    createSeal('canvas', '**土地管理局', '测试用章');

    var now = new Date();
    var time = now.getFullYear() + "年" + ((now.getMonth() + 1) < 10 ? "0" : "") + (now.getMonth() + 1) + "月" + (now.getDate() < 10 ? "0" : "") + now.getDate() + "日";
    $("#time").text(time);

    $(function () {
        var json = JSON.parse(sessionStorage.getItem("data"));
        console.log(json);
        var data = json.features[0].attributes;
        $("#people").val(data.PEOPLE);
        $("#tNumber").val(data.DLBM);
        $("#dNumber").val(data.TBBH);
        $("#admin").val(data.QSDWMC);
        $("#area").val(data.MJ.toFixed(2)+"平方米");
        $("#area2").val(data.MJ.toFixed(2)+"平方米");
        require(["myModule/SmallMap"], function (SmallMap) {
            new SmallMap("map").draw(json.features[0]);
        })
    })
</script>
</body>
</html>